<!--
 * @Author: gy
 * @Date: 2019-12-24 15:13:01
 * @LastEditors  : wl
 * @LastEditTime : 2020-06-17 17:39:10
 -->
<!--  -->
<template>
  <div class="layout-content">
    <el-form ref="form" :rules="rules" :model="form" label-width="90px">
      <el-form-item label="角色名称" prop="role_name">
        <el-input v-model="form['role_name']" placeholder="请输入角色名称" disabled />
      </el-form-item>
      <el-form-item label="权限字符" prop="role_code">
        <el-input v-model="form['role_code']" placeholder="请输入权限字符" disabled />
      </el-form-item>
      <!-- 没有字段 -->
      <el-form-item label="数据范围">
        <el-select v-model="form['data_scope']" placeholder="请选择" @change="scopeChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据权限" v-show="treeShow" prop="deptIds">
        <el-tree
          class="role-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :check-strictly="false"
          show-checkbox
          node-key="id"
          @check="treeCheck"
          ref="tree"
        ></el-tree>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getGetDeptTreeData, // 部门树
} from '@/api/api'
import SystemMixin from '@/mixins/SystemMixin'
export default {
  name: "RoleJurisdiction",
  props: {},
  mixins: [SystemMixin],
  data() {
    let TreeId = (rule, value, fn) => {
      let idList = this.$refs["tree"].getCheckedNodes();
      if (idList.length === 0) {
        fn(new Error("请选择上级菜单"));
      } else {
        fn();
      }
    };
    return {
      treeShow: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        data_scope: "1",
        deptIds: []
        // checkRepeatParam: {
        //   url: '/system/api/Role/CheckRoleCodeUnique',
        //   param: 'role_code',
        //   methods: 'get'
        // },
      },
      options: [
        {
          value: "1",
          label: "全部数据权限"
        },
        {
          value: "2",
          label: "自定义数据权限"
        }
      ],
      rules: {
        role_name: [
          {
            required: true,
            message: "请输入请输入角色名称",
            trigger: "blur"
          }
        ],
        role_code: [
          {
            required: true,
            message: "请输入权限字符",
            trigger: "blur"
          }
        ],
        deptIds: [
          {
            required: true,
            message: "请输选择权限",
            validator: TreeId
          }
        ]
      }
    };
  },
  created() {
    // 部门树
    getGetDeptTreeData().then(res => {
      if(res.code === 0) {
        this.treeData = this.assembleTreeData(res.data, "id", "pId");
      }
    })
  },

  methods: {
    scopeChange(val) {
      if(val === '1') {
        this.treeShow = false
      } else if(val === '2') {
        this.treeShow = true
      }
    },
    // 树结构改变
    treeCheck(item, data) {
      if(data['checkedKeys'] instanceof Array && data['checkedKeys'].length) {
        this.form['deptIds'] = data['checkedKeys']
      } else {
        this.form['deptIds'] = []
      }
      // } else {
      //   this.form['deptIds'] = ''
      // }
      // console.log(this.form['deptIds'], `this.form['deptIds']`)
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
.el-tree.role-tree {
  background: #f5f7f9;
  margin-top: 5px;
}
</style>
